<template>
    <ManageStudentView>
       <div class="card card-manage-info">
            <div class="card-body card-list-scrollable" style="max-height: 600px;">
                <div class="card card-single" v-for="user_manage in filter_message_list" :key="user_manage.user_id">
                    <div class="card-body" @click="go_to_reply(user_manage.user_id)">
                        <span><img :src="user_manage.user_photo" alt="" class="user_photo"></span>
                        <span class="user_name">{{ user_manage.user_name }}</span>
                        <span>{{ user_manage.content }}</span>
                        <span class="submittime">{{ dayjs(user_manage.submittime).format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </div>
                </div>
            </div>
       </div>
    </ManageStudentView>
</template>

<script>
import ManageStudentView from '@/components/ManageStudentView.vue';
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import $ from 'jquery';
import dayjs from 'dayjs';
export default {
    name: "ManageRecentlyMessageView",
    components: {
        ManageStudentView
    },   
    setup() {
        const user_manage_list = ref([]);
        const filter_message_list = ref([]);
        const seenUserIds = ref({});
        const store = useStore();
        const router = useRouter();
        $.ajax({
            url: "http://47.121.28.202:8000/settings/recentlymessage/",
            type: "GET",
            data: {
                student_id: store.state.user.id,
            },
            success(resp) {
                console.log("李海洋");
                console.log(resp);
                for (let i of resp) {
                    if (i.user_id !== 20) {
                        user_manage_list.value.push(i);
                    }
                }
                filter_message_list.value = [];
                seenUserIds.value = {}; 
                for (let i = 0; i < user_manage_list.value.length; i++) {  
                    const { user_id } = user_manage_list.value[i];    
                    if (!(user_id in seenUserIds.value)) {  
                        filter_message_list.value.push(user_manage_list.value[i]);  
                        seenUserIds.value[user_id] = true; 
                    }  
                }
            }
        })

        const go_to_reply = (userid) => {
            if (store.state.user.is_login) {
                router.push({
                    name: 'ordinarydialogue',
                    params: {
                        userid
                    }
                })
            } else {
                router.push({
                    name: 'login'
                });
            }
        }

        return {
            user_manage_list,
            filter_message_list,
            go_to_reply,
            dayjs
        }
    }
}
</script>

<style scoped>
.card-manage-info {
    height: 600px;
}
.user_photo {
    width: 40px;
    margin-right: 10px;
}
.user_name {
    font-weight: bold;
    margin-right: 10px;
}
.submittime {
    float: right;
    position: relative;
    font-size: small;
    top: 5px;
}
.card-single {
    margin-bottom: 10px;
    cursor: pointer;
}
.card-list-scrollable {
    overflow-y: auto;
    border-radius: 5px;
}
</style>